<template>
	<view class="content">
		<!-- 余额显示区域 -->
		<view class="balance-box">
			<p class="title">我的余额(元)</p>
			<p class="balance">{{ balance }}</p>
		</view>
		<zb-tab style="margin: 20rpx 0rpx;" :activeStyle="{fontWeight: 'bold',transform: 'scale(1.1)'}" :data="tabList"
			v-model="active" lineWidth="100rpx"></zb-tab>

		<!-- 账户充值 -->
		<view class="recharge" v-if="active==0">
			<view v-for="(item, index) in rechargeOptions" :key="index" class="option"
				:class="{ 'selected': index === selectedOptionIndex }" @click="selectOption(index)">
				<p style="font-size: 34rpx;">{{ item.paymentAmount }}元</p>
				<p style="">赠送：{{ item.gratuity }}元</p>
			</view>
		</view>
		<!-- 奖励转入 -->
		<view class="reward" v-if="active==1">
			<view class='list'>
				<view class='name'>￥</view>
				<input class='input' v-model="amount" placeholder='请输入转入金额' name="name"></input>
				<p class="all" @click="allMoney">全部转入</p>
			</view>
			<p class="xian"></p>
			<p style="margin-top: 30rpx;font-size: 26rpx;color: #999999;">当前可转入奖励为<text
					style="color: #FF5B13;">￥{{commissionBalance}}</text></p>
		</view>
		<!-- 余额转增 -->
		<view class="balance" v-if="active==2">
			<view class="information">
				<view class="informationForm">
					<p class="leftTitle">接收人姓名</p>
					<input class="rightInput" v-model="userInfo.name" type="text" placeholder="请输入接收人姓名" />
				</view>
				<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				<view class="informationForm">
					<p class="leftTitle">接收人手机号</p>
					<input class="rightInput" v-model="userInfo.phone" type="text" placeholder="请输入接收人手机号" />
				</view>
				<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				<view class="informationForm">
					<p class="leftTitle">转增金额</p>
					<input class="rightInput" v-model="userInfo.amount" type="text" placeholder="请输入转增金额" />
				</view>
				<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				<view class="informationForm">
					<p style="margin-top: 30rpx;font-size: 26rpx;color: #999999;">当前可转增余额为<text
							style="color: #FF5B13;">￥{{balance}}</text></p>
				</view>
			</view>
		</view>
		<!-- 注意事项 -->
		<view class="notice">
			<p style="color: #000;font-weight: bold;"></p>
			<p>充值后账户的金额不能提现，可用于商城消费使用</p>
			<p>佣金导入账户之后不能再次导出、不可提现</p>
			<p>账户充值出现问题可联系商城客服，也可拨打商城客服热线</p>
		</view>

		<!-- 立即充值按钮 -->
		<button class="bottom-button" v-if="active==0" @click="handleRecharge">立即充值</button>
		<button class="bottom-button" v-if="active==1" @click="handleReward">立即转入</button>
		<button class="bottom-button" v-if="active==2" @click="handleBalance">立即转增</button>
	</view>
</template>

<script>
	import {
		getRechargeGear,
		getIncreaseByTransferring,
		getRewardTransfer
	} from '@/api/money.js';
	import {
		addOrder
	} from '@/api/order.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				balance: '680.00',
				active: 0,
				selectedOptionIndex: 0, // 新增的数据属性，用于存储选中的选项索引
				amount: '',
				userInfo: {
					name: '',
					phone: '',
					amount: ''
				},
				tabList: [{
						name: '账户充值',
						value: 0,
					},
					{
						name: '奖励转入',
						value: 1,
					},
					{
						name: '余额转增',
						value: 2,
					}
				],
				rechargeOptions: [],
				balance: "",
				commissionBalance: ""
			};
		},
		onLoad() {
			this.getRechargeGearList()
			this.getUser()
		},
		methods: {
			//获取用户信息
			getUser() {
				getUserInfo().then(res => {
					this.balance = res.data.balance
					this.commissionBalance = res.data.commissionBalance
				});
			},
			getRechargeGearList() {
				const params = {
					pageSize: 99,
					pageNumber: 1
				};
				getRechargeGear(params).then(res => {
					this.rechargeOptions = res.data.records
				})
			},
			//选中金额
			selectOption(index) {
				this.selectedOptionIndex = index; // 设置选中的选项索引
			},
			//全部转入
			allMoney() {
				this.amount = this.commissionBalance
			},
			// 账户充值
			handleRecharge() {
				const params = {
					payType: 4,
					rechargeId: this.rechargeOptions[this.selectedOptionIndex].id
				};
				addOrder(params).then(res => {
					let orderInfo = {
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign
					};
					uni.requestPayment({
						...orderInfo,
						success: (res) => {
							console.log('支付成功', res);
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});
							this.getUser()
						},
						fail: (err) => {
							console.error('支付失败', err);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					});
				})
			},
			//奖励转入
			handleReward() {
				console.log('点击了奖励转入');
				const params = {
					amount: this.amount,
				};
				getRewardTransfer(params).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.getUser()
				})
			},
			//余额转增
			handleBalance() {
				console.log('点击了余额转增');
				getIncreaseByTransferring(this.userInfo).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					this.getUser()
				})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		position: relative;
		min-height: 100vh;
		background-color: #f7f7f7;
		padding: 20rpx;
	}

	.balance-box {
		height: 142rpx;
		background: linear-gradient(-34deg, #ED6C3D 0%, #F6884C 100%);
		border-radius: 20px;
		padding: 30rpx;
		color: $uni-color-fff;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #F6E8E3;
			line-height: 34px;
		}

		.balance {
			margin-top: 20rpx;
			font-size: 50rpx;
			color: #F6E8E3;
			line-height: 34rpx;
		}
	}

	.recharge {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// height: 314rpx;
		background: $uni-color-fff;
		border-radius: 20rpx;
		margin: 20rpx 0rpx;
		text-align: center;
		padding: 18rpx 20rpx;

		.option {
			width: 30%;
			background-color: white;
			border-radius: 10rpx;
			font-size: 26rpx;
			margin: 10rpx;
			background-color: #f7f7f7;
			line-height: 50rpx;
			padding-top: 16rpx;

			// 当选项被选中时应用的样式
			&.selected {
				background-color: $uni-color-orange; // 主题橙色背景
				color: #fff; // 白色字体
			}
		}
	}

	.reward {
		background-color: $uni-color-fff;
		padding: 40rpx;

		.list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.name {
				width: 69rpx;
				height: 100rpx;
				font-weight: bold;
				font-size: 60rpx;
				color: $uni-text-color;
				line-height: 100rpx;
			}

			.input {
				width: 430rpx;
				height: 100rpx;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 100rpx;
			}

			.all {
				width: 103rpx;
				height: 100rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: $uni-color-orange;
				line-height: 100rpx;
			}

		}

		.xian {
			height: 1rpx;
			background: #E3E3E3;
		}

		.moneyBoxBnt {
			font-size: 28rpx;
			color: $uni-color-fff;
			width: 258rpx;
			height: 68rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 58rpx;
			background-color: #D3AB88 !important;
			border: 4rpx solid $uni-color-fff;
			margin: 20rpx auto;
		}
	}

	.information {
		background: $uni-color-fff;
		border-radius: 24rpx;
		margin: auto;
		padding: 24rpx;

		.informationForm {
			width: 649rpx;
			height: 87rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.leftTitle {
				width: 197rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				font-weight: 600;
				line-height: 87rpx;
				text-align: left;
				font-style: normal;
			}

			.rightInput {
				width: 460rpx;
				height: 87rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				line-height: 87rpx;
				text-align: right;
				font-style: normal;
			}
		}
	}

	.notice {
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 44rpx;
	}

	.bottom-button {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: $uni-color-orange;
		color: white;
		border-radius: 80rpx;
		position: fixed;
		bottom: 100rpx;
		left: 10%;
		z-index: 1000;
	}
</style>